<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  props: {
    info: { type: Object, required: true },
  },
});
</script>

<template>
  <view class="live-item">
    <image class="live-item-bg" src="/static/index-live-bg.png" />
    <view style="position: relative; flex-shrink: 0">
      <view class="live-item-avatar">
        <image
          class="live-item-avatar2"
          :src="info.lecturer_pic"
          mode="aspectFill"
        />
      </view>
      <view class="live-item-state">
        <image class="live-item-state2" src="/static/index-live-play.gif" />
        直播中
      </view>
    </view>
    <view class="live-item-content">
      <view class="live-item-name">
        <text
          class="live-item-tag"
          :style="{
            color:
              info.type === 3 ? '#ee5734' : info.type === 4 ? '#ec8008' : '',
            borderColor:
              info.type === 3 ? '#f95e20' : info.type === 4 ? '#ec8008' : '',
          }"
          >{{ info.type_str }}</text
        >{{ info.name }}
      </view>
      <view class="live-item-guider">
        直播讲师：<text style="color: #333333">{{ info.lecturer_name }}</text>
      </view>
    </view>
  </view>
</template>

<style lang="scss">
.live-item {
  position: relative;
  display: flex;
  align-items: center;
  height: 212rpx;
  padding-left: 30rpx;
  padding-right: 20rpx;
  border-radius: 20rpx;
  background-color: #ffffff;

  .live-item-bg {
    position: absolute;
    top: 10rpx;
    right: 6rpx;
    width: 244rpx;
    height: 188rpx;
  }

  .live-item-avatar {
    padding: 2rpx;
    margin-bottom: 18rpx;
    border-radius: 50%;
    border: 4rpx solid rgba(255, 99, 46, 0.3);
  }

  .live-item-avatar2 {
    display: block;
    width: 100rpx;
    height: 100rpx;
    border-radius: 50%;
    border: 4rpx solid #ff632e;
  }

  .live-item-state {
    position: absolute;
    left: 50%;
    bottom: -18rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 120rpx;
    height: 32rpx;
    font-size: 22rpx;
    color: #ffffff;
    line-height: 32rpx;
    border-radius: 10rpx;
    border: 2rpx solid #ffffff;
    background: linear-gradient(126deg, #ff7822 0%, #ff1a54 100%);
    transform: translateX(-50%);
  }

  .live-item-state2 {
    width: 32rpx;
    height: 32rpx;
    margin-right: 4rpx;
  }

  .live-item-content {
    position: relative;
    flex-grow: 1;
    min-width: 0;
    margin-left: 30rpx;
  }

  .live-item-name {
    margin-bottom: 18rpx;
    font-size: 30rpx;
    color: #2d2d2d;
    line-height: 42rpx;
    font-weight: bold;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  .live-item-tag {
    display: inline-block;
    padding: 0 8rpx;
    margin-top: 4rpx;
    margin-right: 10rpx;
    font-size: 22rpx;
    color: #1bc76f;
    line-height: 30rpx;
    border-radius: 10rpx;
    border: 2rpx solid #1bc76f;
    vertical-align: top;
  }

  .live-item-guider {
    font-size: 28rpx;
    color: #999999;
    line-height: 40rpx;
  }
}
</style>